<template>
  <client-only>
    <div class="body">
      <div class="box">
        <!-- 标题部分 -->
        <p class="nav">
          <a href="/gameCategory">所有产品</a> > <a href="#">您的购物车</a>
        </p>
        <p style="margin-left: 15px" class="game-title">
          您的购物车<span style="display: none">空空如也~~</span>
        </p>
        <!-- 物品已添加 -->
        <div class="details-middle">
          <div class="content-left">
            <div class="buy-tips">您的物品已添加</div>
            <div class="bg buy-detail">
              <img width="180" height="80" :src="gameDetail.firstImg" alt="" />
              <div class="buy-detail">
                <p style="margin-right: 400px">{{ gameDetail.name }}</p>
                <div>
                  <p>￥{{ gameDetail.price }}</p>
                </div>
              </div>
            </div>
            <div class="bg">
              <div class="buy-detail">
                <p>预计金额</p>
                <p>￥{{ gameDetail.price }}</p>
              </div>
              <p class="buy-test">买到就是赚到，这当您上的不亏，赶快支付吧</p>
              <a class="buy-btn" href="#" @click="buyGame">立即支付</a>
              <div style="clear: both"></div>
            </div>
          </div>
          <div class="content-right">
            <h3>为您推荐</h3>
            <p style="color: #999; line-height: 26px">根据您购车中的项目</p>
            <div class="game-suggest">
              <div class="bg" v-for="item in recommended" :key="item.id">
                <a :href="'/gameCategory/' + item.id">
                  <img
                    width="155"
                    height="60"
                    :src="item.firstImg"
                    :alt="item.name"
                  />
                </a>
                <p>￥{{ item.price }}</p>
              </div>
            </div>
          </div>
        </div>
        <p style="margin-left: 15px; line-height: 30px">
          买定离手，不退不换，不包含售后服务，出现任何bug问题概不负责
        </p>
        <input type="button" @click="$router.go(-1)" value="返回" />
      </div>
    </div>
  </client-only>
</template>
  
  <script>
import gameInfoApi from "@/api/gameInfo";
import recommendedApi from "@/api/recommended";
import cookie from "js-cookie";
export default {
  data() {
    return {
      gameDetail: {}, // 用来存储根据id获取到的游戏详情数据
      recommended: {}, //用来存储推荐游戏的数据
      price: {}, //接受用户的金额
    };
  },
  mounted() {
    this.getGameById();
    // 初始化推荐游戏模块
    this.initRecommended();
  },
  methods: {
    getGameById() {
      // 根据游戏id调用游戏详情数据api
      gameInfoApi.getGameById(this.$route.params.id).then((res) => {
        this.gameDetail = res.data;
      });
    },
    initRecommended() {
      recommendedApi.getList().then((res) => {
        this.recommended = res.data;
        // console.log(res);
      });
    },
    // 立即支付
    buyGame() {
      // 获取token里面的签署
      let t = cookie.get("userInfo");
      // console.log(t);
      // 判断如果里面有值就反序列化
      if (t != null) {
        this.price = JSON.parse(t);
      }
      // console.log(this.gameDetail);
      // 将得到的值，减去当前游戏的金额
      if (this.gameDetail.price > this.price.burse) {
        this.$message({
          type: "waring",
          message: "余额不足",
        });
        return;
      }
      this.price.burse = this.price.burse - this.gameDetail.price;
      //  console.log(this.price);
      // 再将计算完成的值传给token
      cookie.set("userInfo", JSON.stringify(this.price));
      // console.log(this.gameDetail.id);
      let gameObj = {
        gameId: this.gameDetail.id,
      };
      // 改这里控制添加订单

      gameInfoApi.addGameCart(gameObj).then((res) => {
        console.log(res);
        this.$message({
          type: "success",
          message: "购买成功！",
        });
        // 跳转到个人订单
        this.$router.push(`/personCenter/gameOrder`);
      });
    },
  },
};
</script>
    
    <style scoped>
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
  color: #ddd;
}

.body {
  width: 100%;
  height: 100%;
  background: #1B2838;
}

.box {
  width: 1200px;
  margin: 0 auto;
  padding-top: 10px;
  -webkit-box-shadow: 0px 0px 200px #1B2838;
  box-shadow: 0px 0px 200px #1B2838;
}
.box .nav {
  color: #8f98a0;
  font-size: 14px;
  margin-bottom: 5px;
}
.box .nav a {
  color: #8f98a0;
}
.box .nav a:hover {
  color: #fff;
}
.box .game-title {
  font-size: 30px;
  line-height: 46px;
  margin-bottom: 10px;
  border-bottom: #13203b;
}
.box .details-middle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  flex-wrap: wrap;
  box-sizing: border-box;
  width: 100%;
  /* background-color: rgba(0, 0, 0, 0.3); */
  padding-top: 60px;
  position: relative;
}

.box .details-middle::before {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 30px;
  z-index: 0;
  background: #243B4F;
  box-shadow: 0 10px 30px #29465C;
  /* filter: blur(0.5); */
}
.details-middle .buy-tips {
  width: 160px;
  height: 30px;
  line-height: 30px;
  background: rgba(255, 255, 255, 0.405);
  text-align: center;
  font-weight: bold;
  position: absolute;
  left: 17px;
  top: -30px;
}
.box .details-middle .content-left {
  width: 800px;
  position: relative;
}
.box .details-middle .content-left::before {
  content: "";
  position: absolute;
  left: 70px;
  top: 0;
  width: 0px;
  height: 0px;
  border: 10px solid transparent;
  border-top-color: rgba(255, 255, 255, 0.436);
}
.box .details-middle .content-left .buy-detail {
  display: flex;
  justify-content: space-between;
}
.box .details-middle .content-left .buy-detail p {
  font-size: 16px;
  line-height: 40px;
}
.box .details-middle .content-left .buy-detail .delBtn {
  color: #888;
  margin-left: 20px;
  text-decoration: underline;
}

.buy-test {
  font-size: 14px;
  color: rgb(164, 164, 164);
  line-height: 50px;
}

.buy-btn {
  display: inline-block;
  float: right;
  width: 100px;
  height: 32px;
  font-size: 16px;
  line-height: 32px;
  text-align: center;
  color: #d2e885;
  margin-bottom: 15px;
  background: linear-gradient(to bottom, #a4d007 5%, #536904 95%);
}

.buy-btn:hover {
  background: linear-gradient(to bottom, #a1bf07 5%, #80a006 95%);
}

.box .details-middle .content-right {
  width: 380px;
}
.box .details-middle .content-right .game-suggest {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.box .details-middle .content-right .game-suggest p {
  text-align: right;
}
.box .details-middle .bg {
  background: rgba(0, 0, 0, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.04);
  padding: 15px;
}
input[type="button"] {
  width: 90px;
  height: 30px;
  background: #2b465b;
  color: #76bbeb;
  border: none;
  border-radius: 3px;
  margin: 0 15px 15px 15px;
}
input[type="button"]:hover {
  background: #263f52da;
  color: #5e96be;
}
</style>